/**
 * @desc: 账户余额页面
 * @author: binlety
 */
import { useState, useEffect, useMemo, useReducer } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Breadcrumb, Tabs } from 'antd';
import { useResize } from '@/hooks/useResize';
import HeaderTab from '@/components/CommonTab/index';
import AccountInfo from './AccountInfo';
import AccountList from './AccountList';
import RefundDetailPage from './component/RefundDetailPage';
import StoreDetailPage from './component/StoreDetailPage';
import { getSearchParamsObj } from '@/utils/utils.jsx';
import { getAccountType, getIsUnionUser } from './service';

const tabArr = [//顶部tab信息
	{ key: '1', tab: '用户账户余额' },
	{ key: '2', tab: '商户账户余额' },
]

const reducer = (state, action) => {
	switch (action.type) {
		case 'add':
			return { ...state, infoKey: state.infoKey + 1 };
		case 'addBalance':
			return { ...state, balanceKey: state.balanceKey + 1 };
		default:
			throw new Error();
	}
}

const AccountBalance = () => {

	const [stepObj, setStep] = useState({ step: 1 });

	//用户类型：1是用户，2是商户，3是仓储用户
	const [accountMsg, setAccoutMsg] = useState({});
	const navigate = useNavigate();
	//展示用户类型
	const [type, setType] = useState('1');

	const [tradeNo, setTradeNo] = useState('');

	//重新刷新数据
	const [state, dispatch] = useReducer(reducer, {
		infoKey: 0,
		balanceKey: 0,
	});

	const location = useLocation();

	//监听变更
	const { el: headerEl, height: headerHeight, onResize } = useResize();

	const activeKey = useMemo(() => {
		return String(stepObj ? stepObj.step : 1);
	}, [stepObj])

	//渲染面包屑
	const renderBread = useMemo(() => {
		if (stepObj?.step != 1) {
			return (<Breadcrumb style={{ marginBottom: 16 }}>
				<Breadcrumb.Item key='1' onClick={() => setStep({ step: 1 })}><a >账户余额</a></Breadcrumb.Item>
				{(stepObj.step == 2 || stepObj.step == 3) && <Breadcrumb.Item key='2' onClick={() => setStep({ ...stepObj, step: 2 })}><a>退款抵扣详情</a></Breadcrumb.Item>}
				{stepObj.step == 3 && (<Breadcrumb.Item key='3' ><a >门店抵扣详情</a></Breadcrumb.Item>)}
				{stepObj.step == 4 && (<Breadcrumb.Item key='3' ><a >历史订单查询</a></Breadcrumb.Item>)}
			</Breadcrumb>)
		}
	}, [stepObj])

	//查询用户类型
	const queryAccountType = async () => {
		const res1 = await getAccountType();
		const res2 = await getIsUnionUser();
		if (res1.success) {
			setAccoutMsg({
				...res1.data,
				isUnionUser: res2.success && res2.data
			});
		}
	}

	useEffect(() => {
		if (location.pathname == '/account/balance') {
			const queryObj = getSearchParamsObj(location.search);
			if (queryObj?.payOrder) {
				setTradeNo(queryObj?.payOrder);
				navigate(location.pathname, { replace: true });
			} else {
				dispatch({
					type: 'add'
				})
			}
		}
	}, [location.pathname])

	useEffect(() => {
		queryAccountType();
	}, [])

	const HeaderTabProps = {
		type,
		data: tabArr,
		onChange(val) {
			setType(val);
			onResize();
		}
	}

	const AccountInfoProps = {
		type,
		infoKey: state.infoKey,
		balanceKey: state.balanceKey,
		dispatch,
		accountMsg,
		handleJump(val) {
			setStep(val);
		}
	}

	const AccountListProps = {
		headerHeight,
		type,
		dispatch,
		accountMsg,
		tradeNo,
		infoKey: state.infoKey,
		handleClearTradeNo() {
			setTradeNo('');
		},
		stepObj,
		handleGoHistory() {
			setStep({ step: 4 });
		}
	}

	const detailPageProps = {
		stepObj,
		accountMsg,
		handleJump(val) {
			setStep(val);
		}
	}

	return (
		<>
			{renderBread}
			{activeKey == '1' && (
				<>
					<div ref={headerEl}>
						{[2, 3].includes(accountMsg.userType) && <HeaderTab {...HeaderTabProps} />}
						<AccountInfo {...AccountInfoProps} />
					</div>
					<AccountList {...AccountListProps} />
				</>
			)}
			{ activeKey == '2' && <RefundDetailPage {...detailPageProps} /> }
			{ activeKey == '3' && <StoreDetailPage {...detailPageProps} /> }
			{ activeKey == '4' && <AccountList {...AccountListProps} /> }
		</>
	)
}

export default AccountBalance;
